<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Slide page | Theme Demo</title>
    <meta name="generator" content="VuePress 1.9.7">
    <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
    <link rel="alternate" type="application/atom+xml" href="https://vuepress-theme-hope-demo.mrhope.site/atom.xml" title="Theme Demo Atom Feed">
    <link rel="alternate" type="application/json" href="https://vuepress-theme-hope-demo.mrhope.site/feed.json" title="Theme Demo JSON Feed">
    <link rel="alternate" type="application/rss+xml" href="https://vuepress-theme-hope-demo.mrhope.site/rss.xml" title="Theme Demo RSS Feed">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/assets/icon/chrome-mask-512.png" type="image/png" sizes="512x512">
    <link rel="icon" href="/assets/icon/chrome-mask-192.png" type="image/png" sizes="192x192">
    <link rel="icon" href="/assets/icon/chrome-512.png" type="image/png" sizes="512x512">
    <link rel="icon" href="/assets/icon/chrome-192.png" type="image/png" sizes="192x192">
    <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
    <link rel="apple-touch-icon" href="/assets/icon/apple-icon-152.png">
    <meta name="description" content="A demo for vuepress-theme-hope">
    <meta property="og:url" content="/slides.html">
    <meta property="og:site_name" content="Theme Demo">
    <meta property="og:title" content="Slide page">
    <meta property="og:description" content="@slidestart Slide Demo A simple slide demo and useful hints. &quot; By Mr.Hope. Please scroll mousewheel down to the next slide&quot; --- Marking Slides 👇 -- Marking Slides Use --- to mark ">
    <meta property="og:type" content="article">
    <meta property="og:locale" content="en-US">
    <meta property="og:locale:alternate" content="zh-CN">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image:alt" content="Theme Demo">
    <meta property="article:author" content="Mr.Hope">
    <meta name="theme-color" content="#46bd87">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/assets/icon/ms-icon-144.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    
    <link rel="preload" href="/assets/css/0.styles.b8f52c22.css" as="style"><link rel="preload" href="/assets/js/app.84847668.js" as="script"><link rel="preload" href="/assets/js/layout-Slide.149b82d3.js" as="script"><link rel="preload" href="/assets/js/page-Slidepage.ce7eb934.js" as="script"><link rel="prefetch" href="/assets/js/32.f17183ce.js"><link rel="prefetch" href="/assets/js/33.f0eee0c5.js"><link rel="prefetch" href="/assets/js/34.c8ec31f6.js"><link rel="prefetch" href="/assets/js/35.acda84a6.js"><link rel="prefetch" href="/assets/js/36.6c856d6f.js"><link rel="prefetch" href="/assets/js/37.245a6b48.js"><link rel="prefetch" href="/assets/js/38.5d4e93f4.js"><link rel="prefetch" href="/assets/js/layout-Blog.8e947295.js"><link rel="prefetch" href="/assets/js/layout-Layout.3729e73b.js"><link rel="prefetch" href="/assets/js/layout-NotFound.dc4b8d24.js"><link rel="prefetch" href="/assets/js/page-BlogHome.365a5f87.js"><link rel="prefetch" href="/assets/js/page-Componentdisabled.dfb0f44c.js"><link rel="prefetch" href="/assets/js/page-CustomLayout.1f20e25b.js"><link rel="prefetch" href="/assets/js/page-Encryptionarticle.ae957b4a.js"><link rel="prefetch" href="/assets/js/page-Guides.6831047e.js"><link rel="prefetch" href="/assets/js/page-IntroPage.75fffede.js"><link rel="prefetch" href="/assets/js/page-MarkdownEnhance.32f0f908.js"><link rel="prefetch" href="/assets/js/page-Markdown增强.930f743c.js"><link rel="prefetch" href="/assets/js/page-Projecthome.8c83a03c.js"><link rel="prefetch" href="/assets/js/page-pageconfig.a470fee5.js"><link rel="prefetch" href="/assets/js/page-主要功能与配置演示.647caac1.js"><link rel="prefetch" href="/assets/js/page-博客主页.ad202d8f.js"><link rel="prefetch" href="/assets/js/page-密码加密的文章.9270fcb4.js"><link rel="prefetch" href="/assets/js/page-幻灯片页.852d9b54.js"><link rel="prefetch" href="/assets/js/page-组件禁用.2d3ce548.js"><link rel="prefetch" href="/assets/js/page-自定义布局.24d9c4ab.js"><link rel="prefetch" href="/assets/js/page-页面配置.e4d28c8e.js"><link rel="prefetch" href="/assets/js/page-项目主页.3f83c519.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.d8eb9479.js"><link rel="prefetch" href="/assets/js/vendors~layout-Blog~layout-Layout~layout-NotFound.19e95b48.js"><link rel="prefetch" href="/assets/js/vendors~layout-Layout.925103bb.js"><link rel="prefetch" href="/assets/js/vendors~mermaid.1e3997c4.js"><link rel="prefetch" href="/assets/js/vendors~photo-swipe.7a876d66.js"><link rel="prefetch" href="/assets/js/vendors~reveal.5e629dd2.js"><link rel="prefetch" href="/assets/js/vendors~waline.9d4ab20e.js">
    <link rel="stylesheet" href="/assets/css/0.styles.b8f52c22.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="presentation"><button tabindex="-1" aria-hidden="true" class="color-button" style="display:none;"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="skin-icon"><path d="M224 800c0 9.6 3.2 44.8 6.4 54.4 6.4 48-48 76.8-48 76.8s80 41.6 147.2 0 134.4-134.4
        38.4-195.2c-22.4-12.8-41.6-19.2-57.6-19.2C259.2 716.8 227.2 761.6 224 800zM560 675.2l-32
        51.2c-51.2 51.2-83.2 32-83.2 32 25.6 67.2 0 112-12.8 128 25.6 6.4 51.2 9.6 80 9.6 54.4 0
        102.4-9.6 150.4-32l0 0c3.2 0 3.2-3.2 3.2-3.2 22.4-16 12.8-35.2
        6.4-44.8-9.6-12.8-12.8-25.6-12.8-41.6 0-54.4 60.8-99.2 137.6-99.2 6.4 0 12.8 0 22.4
        0 12.8 0 38.4 9.6 48-25.6 0-3.2 0-3.2 3.2-6.4 0-3.2 3.2-6.4 3.2-6.4 6.4-16 6.4-16 6.4-19.2
        9.6-35.2 16-73.6 16-115.2 0-105.6-41.6-198.4-108.8-268.8C704 396.8 560 675.2 560 675.2zM224
        419.2c0-28.8 22.4-51.2 51.2-51.2 28.8 0 51.2 22.4 51.2 51.2 0 28.8-22.4 51.2-51.2 51.2C246.4
        470.4 224 448 224 419.2zM320 284.8c0-22.4 19.2-41.6 41.6-41.6 22.4 0 41.6 19.2 41.6 41.6 0
        22.4-19.2 41.6-41.6 41.6C339.2 326.4 320 307.2 320 284.8zM457.6 208c0-12.8 12.8-25.6 25.6-25.6
        12.8 0 25.6 12.8 25.6 25.6 0 12.8-12.8 25.6-25.6 25.6C470.4 233.6 457.6 220.8 457.6 208zM128
        505.6C128 592 153.6 672 201.6 736c28.8-60.8 112-60.8 124.8-60.8-16-51.2 16-99.2
        16-99.2l316.8-422.4c-48-19.2-99.2-32-150.4-32C297.6 118.4 128 291.2 128 505.6zM764.8
        86.4c-22.4 19.2-390.4 518.4-390.4 518.4-22.4 28.8-12.8 76.8 22.4 99.2l9.6 6.4c35.2 22.4
        80 12.8 99.2-25.6 0 0 6.4-12.8 9.6-19.2 54.4-105.6 275.2-524.8 288-553.6
        6.4-19.2-3.2-32-19.2-32C777.6 76.8 771.2 80 764.8 86.4z"></path></svg> <div class="color-picker-menu" style="display:none;"><div class="theme-options"><ul class="themecolor-select"><label for="themecolor-select">Theme Color:</label> <li><span class="default-theme"></span></li> </ul> <div class="darkmode-toggle"><label for="darkmode-toggle" class="desc">Theme Mode:</label> <div class="darkmode-switch"><div class="item day"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon light-icon"><path d="M512 256a42.667 42.667 0 0 0 42.667-42.667V128a42.667 42.667 0 0 0-85.334 0v85.333A42.667 42.667 0 0 0 512 256zm384 213.333h-85.333a42.667 42.667 0 0 0 0 85.334H896a42.667 42.667 0 0 0 0-85.334zM256 512a42.667 42.667 0 0 0-42.667-42.667H128a42.667 42.667 0 0 0 0 85.334h85.333A42.667 42.667 0 0 0 256 512zm9.387-298.667a42.667 42.667 0 0 0-59.307 62.72l61.44 59.307a42.667 42.667 0 0 0 31.147 11.947 42.667 42.667 0 0 0 30.72-13.227 42.667 42.667 0 0 0 0-60.16zm459.946 133.974a42.667 42.667 0 0 0 29.44-11.947l61.44-59.307a42.667 42.667 0 0 0-57.6-62.72l-61.44 60.587a42.667 42.667 0 0 0 0 60.16 42.667 42.667 0 0 0 28.16 13.227zM512 768a42.667 42.667 0 0 0-42.667 42.667V896a42.667 42.667 0 0 0 85.334 0v-85.333A42.667 42.667 0 0 0 512 768zm244.48-79.36a42.667 42.667 0 0 0-59.307 61.44l61.44 60.587a42.667 42.667 0 0 0 29.44 11.946 42.667 42.667 0 0 0 30.72-12.8 42.667 42.667 0 0 0 0-60.586zm-488.96 0-61.44 59.307a42.667 42.667 0 0 0 0 60.586 42.667 42.667 0 0 0 30.72 12.8 42.667 42.667 0 0 0 28.587-10.666l61.44-59.307a42.667 42.667 0 0 0-59.307-61.44zM512 341.333A170.667 170.667 0 1 0 682.667 512 170.667 170.667 0 0 0 512 341.333z" fill="currentColor"></path></svg></div> <div class="item auto active"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon auto-icon"><path d="M460.864 539.072H564.8L510.592 376l-49.728 163.072zM872 362.368V149.504H659.648L510.528 0l-149.12 149.504H149.12v212.928L0 511.872l149.12 149.504v212.928h212.352l149.12 149.504 149.12-149.504h212.352V661.376l149.12-149.504L872 362.368zM614.464 693.12l-31.616-90.624H438.272l-31.616 90.624h-85.888l144.576-407.68h90.368l144.576 407.68h-85.824zm0 0" fill="currentColor"></path></svg></div> <div class="item night"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon dark-icon"><path d="M935.539 630.402c-11.43-11.432-28.674-14.739-43.531-8.354-46.734 20.103-96.363 30.297-147.508 30.297-99.59 0-193.221-38.784-263.64-109.203-108.637-108.637-139.61-270.022-78.908-411.148a39.497 39.497 0 0 0-51.886-51.887c-52.637 22.64-100.017 54.81-140.826 95.616-85.346 85.346-132.346 198.821-132.346 319.52 0 120.7 47.001 234.172 132.347 319.519S408.063 947.11 528.76 947.11c120.7 0 234.172-47.003 319.52-132.351 40.809-40.81 72.978-88.19 95.616-140.826a39.497 39.497 0 0 0-8.356-43.532z" fill="currentColor"></path></svg></div></div> <!----></div></div></div></button> <div class="presentation-content content__default"><div data-code="%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20--%3E%0A%0A%23%23%20Slide%20Demo%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0AA%20simple%20slide%20demo%20and%20useful%20hints.%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%3E%20By%20Mr.Hope.%20Please%20scroll%20mousewheel%20down%20to%20the%20next%20slide%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Marking%20Slides%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%5B%F0%9F%91%87%5D(%23%2F1%2F1)%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Marking%20Slides%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0AUse%20%60---%60%20to%20mark%20horizontal%20slides%0A%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in%22%20--%3E%0A%0AUse%20%60--%60%20to%20sperate%20vertical%20slides%20in%20a%20horizontal%20slide.%0A%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in%22%20--%3E%0A%0AUse%20%60%3C!--%20.slide%3A%20...%20--%3E%60%20to%20add%20attributes%20to%20slide%0A%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in%22%20--%3E%0A%0AUse%20%60%3C!--%20.element%3A%20...%20--%3E%60%20to%20add%20attributes%20to%20the%20previous%20html%20element%0A%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in%22%20--%3E%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0A%23%23%23%20This%20is%20a%20H3%0A%0AHeadings%20will%20transform%20to%20UPPERCASE%20by%20default.%0A%0AHere%20is%20paragraph%20with%20some%20**bold**%2C%20_italic_%2C%20~~strikethrough~~%20text%20and%20a%20%5Blink%5D(https%3A%2F%2Fmrhope.site)%2C%20and%20it%20can%20auto%20break%20itself%20so%20you%20don%E2%80%99t%20need%20to%20worry%20the%20length.%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0AList%20is%20%60inline-block%60%20by%20default.%0A%0A-%20Item%0A-%20Item%0A-%20Item%0A%0A1.%20Item%201%0A1.%20Item%202%0A1.%20Item%203%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0ACode%20block%20will%20get%20auto%20highlight%20if%20you%20enable%20%60highlight%60%20plugin.%0A%0A%60%60%60js%0Aconst%20a%20%3D%201%3B%0A%60%60%60%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0AYou%20can%20also%20write%20math%20equation%20using%20tex%20syntax%20if%20you%20enable%20%60math%60%20plugin.%0A%0A%24%24%0AJ(%5Ctheta_0%2C%5Ctheta_1)%20%3D%20%5Csum_%7Bi%3D0%7D%0A%24%24%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Markdown%0A%0AYou%20can%20use%20all%20kinds%20of%20markup%20in%20slides.%0A%0A%E2%9A%A0**Note**%3A%20Table%2C%20hr%20and%20other%20unstandard%20Markdown%20syntax%20is%20not%20supported.%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Layout%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20%20--%3E%0A%0A%23%23%20Layout%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%F0%9F%91%86%20The%20%60r-fit-text%60%20class%20makes%20text%20as%20large%20as%20possible%20without%20overflowing%20the%20slide.%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20%20--%3E%0A%0A%23%23%20Layout%0A%0A!%5BLogo%5D(%2Flogo.svg)%0A%0A%3C!--%20.element%3A%20class%3D%22r-stretch%22%20--%3E%0A%0A%F0%9F%91%86%20The%20%60r-stretch%60%20class%20helper%20lets%20you%20resize%20an%20element%2C%20like%20an%20image%20or%20video%2C%20to%20cover%20the%20remaining%20vertical%20space%20in%20a%20slide.%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20data-background-color%3D%22rgb(70%2C%2070%2C%20255)%22%20--%3E%0A%0A%23%23%20Layout%0A%0A%23%23%23%20Background%0A%0ACutom%20background%20by%20adding%20%60data-background%60%20attribute%20to%20slide.%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0AFragments%20are%20used%20to%20highlight%20or%20incrementally%20reveal%20individual%20elements%20on%20a%20slide.%0A%0AAdd%20%60fragment%60%20and%20animation%20class%20to%20element.%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%23%23%23%20Animation%20class%0A%0A-%20%60fade-in%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in%22%20--%3E%0A%0A-%20%60fade-out%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-out%22%20--%3E%0A%0A-%20%60fade-up%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-up%22%20--%3E%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20%60fade-down%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-down%22%20--%3E%0A%0A-%20%60fade-left%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-left%22%20--%3E%0A%0A-%20%60fade-right%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-right%22%20--%3E%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20%60fade-in-then-out%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in-then-out%22%20--%3E%0A%0A-%20%60fade-in-then-semi-out%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20fade-in-then-semi-out%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%23%23%23%20Animation%20class%0A%0A-%20%60grow%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20grow%22%20--%3E%0A%0A-%20%60shrink%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20shrink%22%20--%3E%0A%0A-%20%60strike%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20strike%22%20--%3E%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20%60highlight-red%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-red%22%20--%3E%0A%0A-%20%60highlight-green%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-green%22%20--%3E%0A%0A-%20%60highlight-blue%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-blue%22%20--%3E%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20%60highlight-current-red%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-current-red%22%20--%3E%0A%0A-%20%60highlight-current-green%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-current-green%22%20--%3E%0A%0A-%20%60highlight-current-blue%60%0A%3C!--%20.element%3A%20class%3D%22fragment%20highlight-current-blue%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%23%23%23%20Mutiple%20fragments%0A%0AMultiple%20fragments%20can%20be%20applied%20to%20the%20same%20element%20sequentially%20by%20wrapping%20it%0A%0A%3Cspan%20class%3D%22fragment%20fade-in%22%3E%0A%20%20%3Cspan%20class%3D%22fragment%20highlight-red%22%3E%0A%20%20%20%20%3Cspan%20class%3D%22fragment%20fade-out%22%3E%0A%20%20%20%20%20%20Fade%20in%20%3E%20Turn%20red%20%3E%20Fade%20out%0A%20%20%20%20%3C%2Fspan%3E%0A%20%20%3C%2Fspan%3E%0A%3C%2Fspan%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Fragment%0A%0A%23%23%23%20Order%0A%0AOrder%20can%20be%20changed%20using%20the%20%60data-fragment-index%60%20attribute.%0A%0AMultiple%20elements%20can%20appear%20at%20the%20same%20index.%0A%0A-%20Appears%20last%0A%3C!--%20.element%3A%20class%3D%22fragment%22%20data-fragment-index%3D%223%22--%3E%0A%0A-%20Appears%20second%0A%3C!--%20.element%3A%20class%3D%22fragment%22%20data-fragment-index%3D%222%22--%3E%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20Appears%20first%0A%3C!--%20.element%3A%20class%3D%22fragment%22%20data-fragment-index%3D%221%22--%3E%0A%0A-%20Appears%20second%0A%3C!--%20.element%3A%20class%3D%22fragment%22%20data-fragment-index%3D%222%22--%3E%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Transition%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Transition%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0ATransition%20can%20be%20changed%20by%20setting%20the%20%60transition%60%20config%20option%20globally%20or%20%60data-transition%60%20attribute%20on%20specific%20slide.%0A%0APossible%20values%3A%0A%0A-%20none%0A-%20fade%0A-%20slide%0A%0A%3C!--%20list%20break%20--%3E%0A%0A-%20convex%0A-%20concave%0A-%20zoom%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-auto-animate%20--%3E%0A%0A%23%23%20Transition%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%23%20Auto%20animate%0A%0A%60data-auto-animate%60%20can%20be%20added%20on%20nearby%20slides%20to%20make%20an%20animation%20on%20unchanged%20elements.%0A%0A---%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Functions%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Functions%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%23%20Code%0A%0ABy%20enabling%20%60highlight%60%20plugin%2C%20you%20can%20highlight%20code%20blocks.%0A%0AYou%20can%20use%20%60%5Ba-b%7Cc-d%5D%60%20syntax%20to%20highlight%20lines%20by%20steps.%0A%0A%60%60%60js%20%5B1-2%7C3%7C4%5D%0Alet%20a%20%3D%201%3B%0Alet%20b%20%3D%202%3B%0Alet%20c%20%3D%20(x)%20%3D%3E%201%20%2B%202%20%2B%20x%3B%0Ac(3)%3B%0A%60%60%60%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Functions%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%23%20Overview%0A%0APress%20%60Esc%60%20or%20%60O%60%20to%20enter%20overview%20mode%20when%20the%20presentation%20is%20active%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Functions%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%23%20Full%20Screen%0A%0APress%20%60F%60%20or%20%60F11%60%20to%20enter%20fullscreen%20when%20the%20presentation%20is%20active%0A%0A--%0A%0A%3C!--%20.slide%3A%20data-transition%3D%22slide%22%20data-auto-animate%20--%3E%0A%0A%23%23%20Functions%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%23%20Zoom%0A%0AHold%20down%20the%20%60alt%60%20key%20(%60ctrl%60%20in%20Linux)%20and%20click%20on%20any%20element%20to%20zoom%20towards%20it.%0A%0AClick%20again%20to%20zoom%20back%20out.%0A%0A---%0A%0A%3C!--%20.element%3A%20class%3D%22r-fit-text%22%20--%3E%0A%0A%23%23%20The%20End%0A" class="md-presentation reveal reveal-viewport loading"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="md-presentation-loading-icon" style="background:0 0;display:block;shape-rendering:auto;"><circle cx="50" cy="50" r="0" fill="none" stroke="currentColor" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;40" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="0s"></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="0s"></animate></circle> <circle cx="50" cy="50" r="0" fill="none" stroke="currentColor" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;40" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.3333333333333333s"></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.3333333333333333s"></animate></circle> <circle cx="50" cy="50" r="0" fill="none" stroke="currentColor" stroke-width="2"><animate attributeName="r" repeatCount="indefinite" dur="1s" values="0;40" keyTimes="0;1" keySplines="0 0.2 0.8 1" calcMode="spline" begin="-0.6666666666666666s"></animate> <animate attributeName="opacity" repeatCount="indefinite" dur="1s" values="1;0" keyTimes="0;1" keySplines="0.2 0 0.8 1" calcMode="spline" begin="-0.6666666666666666s"></animate></circle></svg> <div class="slides" style="display:none;"><section data-markdown data-separator="^\r?\n---\r?\n$" data-separator-vertical="^\r?\n--\r?\n$"><script type="text/template">
        
      </script></section></div></div></div> <div class="menu"><button class="menu-button"><span class="icon"></span></button> <button class="back-button"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M1014.749 449.156v125.688H260.626l345.64 345.64-89.239 89.237L19.307 512l497.72-497.721 89.238 89.238-345.64 345.64h754.124z"></path></svg></button> <button class="home-button"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M780.106 420.978L506.994 147.866 233.882 420.978h.045v455.11H780.06v-455.11h.046zm90.977 90.976V876.09a91.022 91.022 0 01-91.023 91.022H233.927a91.022 91.022 0 01-91.022-91.022V511.954l-67.22 67.175-64.307-64.307 431.309-431.31c35.498-35.498 93.115-35.498 128.614 0l431.309 431.31-64.307 64.307L871.083 512z"></path></svg></button></div></div><div class="global-ui"><!----><!----><div id="pwa-install"><!----> <div id="install-modal-wrapper" style="display:none;"><div class="background"></div> <div class="install-modal"><div class="header"><button aria-label="Close" class="close-button"><svg width="23" height="22" xmlns="http://www.w3.org/2000/svg" class="icon close-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.12.358a1.224 1.224 0 011.729 0l8.92 8.914L20.686.358a1.224 1.224 0 011.73 1.728L13.497 11l8.92 8.913a1.222 1.222 0 11-1.73 1.729l-8.919-8.913-8.92 8.913a1.224 1.224 0 01-1.729-1.729L10.04 11l-8.92-8.914a1.222 1.222 0 010-1.728z" fill="currentColor"></path></svg></button> <div class="logo"><!----> <div class="title"><h1></h1> <p class="desc">This app can be installed on your PC or mobile device.  This will allow this web app to look and behave like any other installed app.  You will find it in your app lists and be able to pin it to your home screen, start menus or task bars.  This installed web app will also be able to safely interact with other apps and your operating system. </p></div></div></div> <div class="content"><div class="highlight"><!----> <!----></div> <div class="description"><h3>Description</h3> <p></p></div></div> <div class="button-wrapper"><button class="install-button">
        Install <span></span></button> <button class="cancel-button">
        Cancel
      </button></div></div></div></div><div tabindex="-1" role="dialog" aria-hidden="true" class="pswp"><div class="pswp__bg"></div> <div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div></div> <div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div> <button title="Close" aria-label="Close" class="pswp__button pswp__button--close"></button> <button title="Share" aria-label="Share" class="pswp__button pswp__button--share"></button> <button title="Switch to full screen" aria-label="Switch to full screen" class="pswp__button pswp__button--fs"></button> <button title="Zoom in/out" aria-label="Zoom in/out" class="pswp__button pswp__button--zoom"></button> <div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div> <button title="Prev (Arrow Left)" aria-label="Prev (Arrow Left)" class="pswp__button pswp__button--arrow--left"></button> <button title="Next (Arrow Right)" aria-label="Next (Arrow Right)" class="pswp__button pswp__button--arrow--right"></button> <div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div></div></div>
    <script src="/assets/js/app.84847668.js" defer></script><script src="/assets/js/layout-Slide.149b82d3.js" defer></script><script src="/assets/js/page-Slidepage.ce7eb934.js" defer></script>
  </body>
</html>
